<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="Js/require.js"></script>
		<script src="Js/require-config.js"></script>
		<script type="text/javascript">
			require(["jquery", "vue"], function($, Vue) {
				$(function() {
					//数学测试
					! function() {
						console.log('5/2=%s', 5/2);
						console.log('5%2=%s', 5%2);
					}();
					! function() {
						$.get("http://localhost:8080/bim/api/departments", data => {
							console.log(data)
						});
					};
					! function() {
						console.log("log字符串：%s，数字：%d，对象：%o", "abc", 20, {
							id: 1,
							name: "张在"
						});
						console.error("error字符串：%s，数字：%d，对象：%o", "abc", 20, {
							id: 1,
							name: "张在"
						});
						console.debug("debug字符串：%s，数字：%d，对象：%o", "abc", 20, {
							id: 1,
							name: "张在"
						});
						console.warn("warn字符串：%s，数字：%d，对象：%o", "abc", 20, {
							id: 1,
							name: "张在"
						});
						console.info("info字符串：%s，数字：%d，对象：%o", "abc", 20, {
							id: 1,
							name: "张在"
						});
					}();
					//Vue混入
					! function() {
						let option = {
							methods: {
								init() {
									$(window).bind("keydown keyup", e => {
										console.log(e.ctrlKey);
									});
									var a = 0;
									var loop = true;
									while(loop) {
										loop = false;
										switch(a) {
											case 0:
												a = 2;
												loop = true;
												break;
											case 1:
												console.log(1);
												break;
											case 2:
												console.log(2);
												break;
										}
									}
								}
							}
						};
						var vm = new Vue({
							el: "#page",
							data: {

							},
							mixins: [option],
							mounted: function() {
								this.init();
							},
							methods: {}
						});
					};
					//Object的常用方法
					! function() {
						var myPrototype = {
							prototypeMethod() {
								console.log("prototypeMethod");
							}
						};
						Object.defineProperty(myPrototype, "prototypeProp", {
							get: function() {
								return this._prop4;
							},
							set: function(val) {
								console.log("设置prototypeProp:" + val);
								this._prop4 = val;
							}
						});
						var o = Object.create(myPrototype, {
							prop1: {
								_prop1: 0,
								get: function() {
									return this._prop1;
								},
								set: function(val) {
									console.log("设置prop1:" + val);
									this._prop1 = val;
								}
							},
						});
						Object.defineProperties(o, {
							prop2: {
								_prop2: 0,
								get: function() {
									return this._prop2;
								},
								set: function(val) {
									console.log("设置prop2:" + val);
									this._prop2 = val;
								}
							}
						})
						Object.defineProperty(o, "prop3", {
							_prop3: 0,
							get: function() {
								return this._prop3;
							},
							set: function(val) {
								console.log("设置prop3:" + val);
								this._prop3 = val;
							}
						});

						Object.assign(o, {
							_prop4: 5,
							field1: 1,
							method1() {
								console.log("调用method1，显示field1:" + this.field1);
								this.prototypeMethod();
							}
						});
						var o1 = Object.create(myPrototype);
						Object.assign(o1, {
							_prop4: 10
						});

						o.prop1 = 1;
						o.prop2 = 2;
						o.prop3 = 3;
						o.method1();
						o.prototypeProp = 6;
						o1.prototypeProp = 11;
					};
					//日期格式化
					! function() {
						var time = new Date(2018, 4, 5, 9, 6, 2);
						var timeString = new Intl.DateTimeFormat("zh-CN", {
							//era:'narrow',
							year: 'numeric',
							month: '2-digit',
							day: '2-digit',
							hour: 'numeric',
							minute: 'numeric',
							second: 'numeric',
							hour12: false,
							//weekday:'long'
						}).format(time);
						console.log(timeString);
					};
					//树型列表展成平铺列表
					! function() {
						var list = [{
								name: "1",
								children: [{
										name: "A",
										children: []
									},
									{
										name: "B",
										children: []
									}
								]
							},
							{
								name: "2",
								children: [{
										name: "C",
										children: [{
												name: "#",
												children: []
											},
											{
												name: "%",
												children: []
											}
										]
									},
									{
										name: "D",
										children: []
									}
								]
							},
							{
								name: "3",
								children: []
							}
						];
						var flatTree = function(array, childrenSelector) {
							var subList = [];
							array.forEach(m => subList = subList.concat(childrenSelector(m)));
							if(subList.length > 0) {
								return array.concat(flatTree(subList, childrenSelector));
							}
							return array;
						};
						var resultList = flatTree(list, m => m.children);
					};
					//定义属性
					! function() {
						//为对象定义属性
						var a = {
							_name: "",
							get name() {
								return this._name;
							},
							set name(val) {
								this._name = val;
							}
						};
						Object.defineProperty(a, "age", {
							_age: 0,
							get: function() {
								return this._age;
							},
							set: function(val) {
								this._age = val;
							}
						});
					};
					//画布上画图
					! function() {
						var myCanvas = document.querySelector("#myCanvas");
						var context = myCanvas.getContext("2d");
						//设置对象起始点和终点
						context.moveTo(10, 10);
						context.lineTo(100, 10);
						context.lineTo(100, 100);
						context.lineTo(10, 100);
						context.closePath();
						//设置样式
						context.lineWidth = 2;
						context.strokeStyle = "#Ffff00";
						context.fillStyle = "#F6F152";
						//绘制
						context.stroke();
						context.fill();
						//context.rect(20, 20, 100, 100);

						//位图填充
						var bgimg = new Image();
						bgimg.src = "A-01-Model.jpg";
						bgimg.onload = function() {
							var pattern = context.createPattern(bgimg, "repeat");
							context.fillStyle = pattern;
							context.strokeStyle = "#F20B0B";
							context.fillRect(100, 100, 600, 600);
							context.strokeRect(100, 100, 600, 600);
						};
					};
				});
			});
		</script>
	</head>

	<body>
		<div id="page" style="background-color: #599BDC;">
			<canvas id="myCanvas" width="1500" height="600" style="border:1px solid black; "></canvas>
		</div>
		<video src=""></video>
		<select>
			<option selected="selected"></option>
		</select>
	</body>

</html>